<template>
    <div class="container">
        <el-table class="el-table" :data="subscribelist" stripe style="width: 100%">
            <el-table-column prop="collectionId" label=" 订阅id" width="200">
            </el-table-column>
            <el-table-column prop="collectionBlog.collectionName" label="订阅名称" width="200">
            </el-table-column>

            <el-table-column label="" width="100">
                <template v-slot="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.collectionId)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>

import axios from "axios";
import { ref, onMounted } from 'vue';

export default {
    data() {
        return {
            user_id: '',
            personalobject: Object,
            subscribelist: ref([]),
        }
    },
    methods: {
        fetchSubscribtions() {
            axios({
                url: "/api/subscribe/getUserSubscribe",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data: {


                }
            })
                .then(response => {
                    console.log(response);
                    this.subscribelist = Array.isArray(response.data.data) ? response.data.data : [];
                })
                .catch(error => {
                    console.error('Error ', error);
                })

        },
        handleDelete(id) {
            // console.log(id);
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    url: "/api/subscribe/falseSubscribe",
                    method: 'post',
                    headers: {
                        "HOSHINO_T_KK": localStorage.getItem("userToken"),
                    },
                    data: {
                        collection_id: id

                    }
                })
                    .then(response => {
                        console.log(response);
                        this.fetchSubscribtions();

                    })
                    .catch(error => {
                        console.error('Error ', error);
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消订阅'
                });
            });
        },


    },
    created() {
        this.fetchSubscribtions();


    },
}
</script>

<style scoped>
.el-link--main {
    color: #409EFF;
}

.el-col {
    padding-left: 7%;

}

.container {
    margin-left: 10%;
    background-color: white;
    height: 100%;
    width: 70%;

}
</style>
